<template>
  <div>
    <div style="width: 80%; text-align: left; margin: 20px;">
    <el-button type="primary" @click="open_insert_dialog">添加部门</el-button>
    </div>
    <!-- 部门列表 -->
    <Table ref="myTable" :param="table"></Table>

    <!-- 新增部门的弹出框 -->
    <el-dialog
      title="新增部门"
      :visible.sync="basic.dialogVisible"
      width="30%">

      <!-- 表单区域 -->
      <el-form ref="form" :model="form">
        <el-form-item label="部门名称">
          <el-input v-model="form.depName" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="部门描述">
          <el-input v-model="form.depInfo" type="textarea" placeholder="请输入部门描述"></el-input>
        </el-form-item>
      </el-form>
      <!-- 表单区域 -->

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="insert_dep">新 增</el-button>
        <el-button @click="basic.dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  //自定义的表格组件
  import Table from './Table'

  export default {
    components: {
      Table
    },
    data(){
      return {
        form: {
          //表达的相关属性
          depName: "",
          depInfo: ""
        },
        basic: {
          //弹出框的属性
          dialogVisible: false
        },
        table: {
          //表头
          title: [
            {title:"部门编号", attr:"id"},
            {title:"部门名称", attr:"depName"},
            {title:"部门人数", attr:"depCount"},
            {title:"部门描述", attr:"depInfo"},
            {title:"成立时间", attr:"createTime"}
          ],
          //请求的url
          url: "/sys/dep/list",
          //请求的数据
          data: {},
          //后续的操作按钮
          btns: {
            enable: true,
            //操作列表
            actions: [
              {btnName: "修改", callable: (val) => {
                console.log("新增了：", val);
              }},
              {btnName: "删除", callable: (val) => {
                console.log("修改了：", val);
              }}
            ]
          },
          //分页参数
          page: {
            //是否需要开启分页的功能
            enable: true,
            //当前第几页
            pageNum: 1,
            //每页多少行记录
            pageSize: 5
          }
        }
      }
    },
    methods: {
      //打开新增的弹出框
      open_insert_dialog(){
        this.basic.dialogVisible = true;
      },
      //新增部门
      insert_dep(){
        this.$.ajax({
          type: "POST",
          url: "/sys/dep/insert",
          data: this.form,
          success: (data) => {
            //清空表单
            this.form = {};
            //关闭弹窗
            this.basic.dialogVisible = false;
            //刷新表格
            this.$refs.myTable.request();
          }
        });
      }
    }
  }
</script>


<style>
</style>
